<template>
  <div class="users-base-wrapper">
    <!-- <div class="module-name">实验室正常值映射</div> -->
    <div class="details-layout">
      <el-row style="text-align: left; margin-bottom: 16px;">
        <el-button type="primary" size="mini" @click="handleRefresh">刷新</el-button>
        <el-button v-if="isOperate" type="primary" size="mini" icon="el-icon-plus" @click="handleAdd">新增</el-button>
      </el-row>
      <el-table :data="laboratoryMapList" stripe style="width: 100%" size="mini" row-key="id"
                :header-cell-style="{ background: 'rgba(117, 60, 202, 0.04)' }" :tree-props="{ children: 'children' }">
        <el-table-column
          type="index"
          label="序号"
          fixed="left"
          width="50">
        </el-table-column>
        <template v-for="(column, index) in tableColumns">
          <el-table-column v-if="column.visible" :width="column.width" :key="index" :min-width="column.minWidth" 
                           :label="column.name" :fixed="column.fixed" :show-overflow-tooltip="true" align="center">
            <template slot-scope="scope">
              <!-- 编辑 -->
              <div v-if="column.key === 'operation'">
                <span v-if="isOperate">
                  <i class="el-icon-edit table-icon" @click="handleEdit(scope.row)"></i>
                  <i class="el-icon-delete table-icon" @click="handleDelete(scope.row)"></i>
                </span>
                <i class="el-icon-view table-icon" v-else @click="handleEdit(scope.row)"></i>
              </div>
              <span v-else>{{ scope.row[column.key] }}</span>
            </template>
          </el-table-column>
        </template>
      </el-table>
      <add-record
        :isOperate="isOperate"
        :dialogVisible="dialogVisible" 
        :dialogTitle="dialogTitle" 
        :editData="editData"
        @handleCancel="handleCancel"
        :searchParams="searchParams"
        :eCRFDesignList="eCRFDesignList"
        :embeddedList="embeddedList">
      </add-record>
    </div>
  </div>
</template>
<script>

import { mapActions } from 'vuex'
import { tableColumns, typeEnumeration } from './data'
import addRecord from './component/add-record.vue'
import { cloneDeep } from 'lodash-es'
import { variableTypeEnumeration } from '@/utils/enums/ecrf-design.js'

export default {
  name: 'laboratory-mapping',
  components: {
    addRecord
  },

  data() {
    return {
      dialogVisible: false,
      dialogTitle: '',
      editData: {},
      laboratoryMapList: [],
      tableColumns,
      searchParams: {},
      queryParams: {},
      typeEnumeration,
      variableTypeEnumeration,
      eCRFDesignList: [],
      embeddedList: [],
      isOperate: true
    }
  },
  mounted() {
    const databaseInfo = JSON.parse(localStorage.getItem('sys-database-info')) || {}

    if (databaseInfo.isLock === '1') {
      this.isOperate = false
    }

    this.searchParams = {
      projectId: localStorage.getItem('sys-project-id') || '',
      ...databaseInfo,
      databaseNum: databaseInfo.databaseVersion,
    }
    this.getLaboratoryMappingList()
  },

  methods: {
    ...mapActions('eCRFDesign', ['qryLaboratoryMappingList', 'qryDesignList', 'deleteLaboratoryMappingList']),

    // 查询界面设计列表
    getLaboratoryMappingList() {
      const params = {
        ...this.searchParams
      }
      this.qryLaboratoryMappingList({ params }).then((res) => {
        const { data, code, message } = res
        if (code === 200) {
          this.laboratoryMapList = data
        } else {
          this.$message.error(message || '服务异常，请稍后重试!')
        }
      })
    },

    // 刷新列表
    handleRefresh() {
      this.getLaboratoryMappingList()
    },

    // 新增界面设计
    handleAdd() {
      this.dialogVisible = true
      this.editData = {}
      this.dialogTitle = '新建'
      this.getECRFList()
    },

    // 编辑
    handleEdit(record) {
      this.dialogTitle = '编辑'
      this.dialogVisible = true
      this.getECRFList()
      this.editData = {
        id: record.id,
        // 性别所在表
        sexIndexTable1: record.sexIndexTable + '#' + record.sexIndexTableChinese,
        sexVariable2: record.sexVariable + '#' + record.sexVariableChinese,
        // 出生日期
        birthIndexTable3: record.birthIndexTable + '#' + record.birthIndexTableChinese,
        birthVariable4: record.birthVariable + '#' + record.birthVariableChinese,
        ageVariable5: record.ageVariable + '#' + record.ageVariableChinese,
        // 实验室检查表
        labCheckTable6: record.labCheckTable + '#' + record.labCheckTableChinese,
        modelVariableName7: record.modelVariableName + '#' + record.modelVariableNameChinese,
        checkDateVariable8: record.checkDateVariable + '#' + record.checkDateVariableChinese,
        labVariable9: record.labVariable + '#' + record.labVariableChinese,
        // 实验室检查明细表
        labCheckDetailTable10: record.labCheckDetailTable + '#' + record.labCheckDetailTableChinese,
        checkProjectVariable11: record.checkProjectVariable + '#' + record.checkProjectVariableChinese,
        unitVariable12: record.unitVariable + '#' + record.unitVariableChinese,
        floorVariable13: record.floorVariable + '#' + record.floorVariableChinese,
        upVariable14: record.upVariable + '#' + record.upVariableChinese,
        checkVariable15: record.checkVariable + '#' + record.checkVariableChinese,
        labNormalVariable16: record.labNormalVariable + '#' + record.labNormalVariableChinese
      }
    },

    // 关闭弹框
    handleCancel(type) {
      this.dialogVisible = false
      if (type === 'refresh') { // 是刷新列表
        this.getLaboratoryMappingList()
      }
    },

    // 查看ECRF表单
    getECRFList() {
      const params = {
        ...this.searchParams,
        databaseVersion: '0',
        embedded: ''
      }
      this.qryDesignList({ params }).then((res) => {
        const { data, code, message } = res
        if (code === 200) {
          this.eCRFDesignList = data
          const list = []
          data.map((dItem, dIndex) => {
            if (dItem.embedded === '1') {
              list.push(dItem)
            }
          })
          this.embeddedList = cloneDeep(list)
        } else {
          this.$message.error(message || '服务异常，请稍后重试!')
        }
      })
    },

    // 删除
    handleDelete(row) {
      const params = {
        id: row.id
      }
      this.$confirm('确定删除该条数据吗？', '删除提示', {
        type: 'warning'
      }).then(res => {
        this.deleteLaboratoryMappingList({ params })
          .then(res => {
            if (res.code === 200) {
              this.$message({ message: '删除成功', type: 'success' })
              this.getLaboratoryMappingList()
            }
          })
      })
    }
  },
}
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>
